﻿
<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>09、优化代码结构实现多物体运动</title>


    <script type="text/javascript" src="../js/Oak3D_v_0_5.js"></script>

    <script id="shader-fs" type="x-shader/x-fragment">

        precision mediump float;


        varying vec2 vTextureCoord;

        uniform sampler2D uSampler;

        uniform vec3 uColor;

        void main(void) {
        vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
        gl_FragColor = textureColor * vec4(uColor, 1.0);
        }
    </script>

    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;
        attribute vec2 aTextureCoord;

        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;

        varying vec2 vTextureCoord;

        void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vTextureCoord = aTextureCoord;
        }
    </script>


    <script type="text/javascript">

        var gl;

        function initGL(canvas) {
            try {
                gl = canvas.getContext("experimental-webgl");
                gl.viewportWidth = canvas.width;
                gl.viewportHeight = canvas.height;
            } catch (e) {
            }
            if (!gl) {
                alert("Could not initialise WebGL, sorry :-(");
            }
        }


        function getShader(gl, id) {
            var shaderScript = document.getElementById(id);
            if (!shaderScript) {
                return null;
            }

            var str = "";
            var k = shaderScript.firstChild;
            while (k) {
                if (k.nodeType == 3) {
                    str += k.textContent;
                }
                k = k.nextSibling;
            }

            var shader;
            if (shaderScript.type == "x-shader/x-fragment") {
                shader = gl.createShader(gl.FRAGMENT_SHADER);
            } else if (shaderScript.type == "x-shader/x-vertex") {
                shader = gl.createShader(gl.VERTEX_SHADER);
            } else {
                return null;
            }

            gl.shaderSource(shader, str);
            gl.compileShader(shader);

            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                alert(gl.getShaderInfoLog(shader));
                return null;
            }

            return shader;
        }


        var shaderProgram;

        function initShaders() {
            var fragmentShader = getShader(gl, "shader-fs");
            var vertexShader = getShader(gl, "shader-vs");

            shaderProgram = gl.createProgram();
            gl.attachShader(shaderProgram, vertexShader);
            gl.attachShader(shaderProgram, fragmentShader);
            gl.linkProgram(shaderProgram);

            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
                alert("Could not initialise shaders");
            }

            gl.useProgram(shaderProgram);

            shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
            gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

            shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
            gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);

            shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
            shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
            shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
            shaderProgram.colorUniform = gl.getUniformLocation(shaderProgram, "uColor");
        }


        function handleLoadedTexture(texture) {
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

            gl.bindTexture(gl.TEXTURE_2D, null);
        }


        var starTexture;

        function initTexture() {
            starTexture = gl.createTexture();
            starTexture.image = new Image();
            starTexture.image.onload = function () {
                handleLoadedTexture(starTexture)
            }

            starTexture.image.src = "../texture/star.gif";
        }


        var mvMatrix;
        var mvMatrixStack = [];
        var pMatrix;

        function mvPushMatrix() {
            var copy = new okMat4();
            mvMatrix.clone(copy);
            mvMatrixStack.push(copy);
        }

        function mvPopMatrix() {
            if (mvMatrixStack.length == 0) {
                throw "Invalid popMatrix!";
            }
            mvMatrix = mvMatrixStack.pop();
        }


        function setMatrixUniforms() {
            gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix.toArray());
            gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix.toArray());
        }








        var currentlyPressedKeys = {};

        function handleKeyDown(event) {
            currentlyPressedKeys[event.keyCode] = true;
        }


        function handleKeyUp(event) {
            currentlyPressedKeys[event.keyCode] = false;
        }


        var zoom = -15;


        var tilt = 90;
        var spin = 0;


        function handleKeys() {
            if (currentlyPressedKeys[33]) {
                // Page Up
                zoom -= 0.1;
            }
            if (currentlyPressedKeys[34]) {
                // Page Down
                zoom += 0.1;
            }
            if (currentlyPressedKeys[38]) {
                // Up cursor key
                tilt += 2;
            }
            if (currentlyPressedKeys[40]) {
                // Down cursor key
                tilt -= 2;
            }
        }


        var starVertexPositionBuffer;
        var starVertexTextureCoordBuffer;

        function initBuffers() {
            starVertexPositionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, starVertexPositionBuffer);
            vertices = [
                -1.0, -1.0, 0.0,
                 1.0, -1.0, 0.0,
                -1.0, 1.0, 0.0,
                 1.0, 1.0, 0.0
            ];
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            starVertexPositionBuffer.itemSize = 3;
            starVertexPositionBuffer.numItems = 4;

            starVertexTextureCoordBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, starVertexTextureCoordBuffer);
            var textureCoords = [
                0.0, 0.0,
                1.0, 0.0,
                0.0, 1.0,
                1.0, 1.0
            ];
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
            starVertexTextureCoordBuffer.itemSize = 2;
            starVertexTextureCoordBuffer.numItems = 4;
        }


        function drawStar() {
            gl.activeTexture(gl.TEXTURE0);
            gl.bindTexture(gl.TEXTURE_2D, starTexture);
            gl.uniform1i(shaderProgram.samplerUniform, 0);

            gl.bindBuffer(gl.ARRAY_BUFFER, starVertexTextureCoordBuffer);
            gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, starVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);

            gl.bindBuffer(gl.ARRAY_BUFFER, starVertexPositionBuffer);
            gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, starVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

            setMatrixUniforms();
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, starVertexPositionBuffer.numItems);
        }



        function Star(startingDistance, rotationSpeed) {
            this.angle = 0;
            this.dist = startingDistance;
            this.rotationSpeed = rotationSpeed;

            // Set the colors to a starting value.
            this.randomiseColors();
        }

        Star.prototype.draw = function (tilt, spin, twinkle) {
            mvPushMatrix();

            // Move to the star's position
            mvMatrix.rotY(OAK.SPACE_LOCAL, this.angle, true);
            mvMatrix.translate(OAK.SPACE_LOCAL, this.dist, 0.0, 0.0, true);

            // Rotate back so that the star is facing the viewer
            mvMatrix.rotY(OAK.SPACE_LOCAL, -this.angle, true);
            mvMatrix.rotX(OAK.SPACE_LOCAL, -tilt, true);

            if (twinkle) {
                // Draw a non-rotating star in the alternate "twinkling" color
                gl.uniform3f(shaderProgram.colorUniform, this.twinkleR, this.twinkleG, this.twinkleB);
                drawStar();
            }

            // All stars spin around the Z axis at the same rate
            mvMatrix.rotZ(OAK.SPACE_LOCAL, spin, true);

            // Draw the star in its main color
            gl.uniform3f(shaderProgram.colorUniform, this.r, this.g, this.b);
            drawStar();

            mvPopMatrix();
        };


        var effectiveFPMS = 60 / 1000;
        Star.prototype.animate = function (elapsedTime) {
            this.angle += this.rotationSpeed * effectiveFPMS * elapsedTime;

            // Decrease the distance, resetting the star to the outside of
            // the spiral if it's at the center.
            this.dist -= 0.01 * effectiveFPMS * elapsedTime;
            if (this.dist < 0.0) {
                this.dist += 5.0;
                this.randomiseColors();
            }

        };


        Star.prototype.randomiseColors = function () {
            // Give the star a random color for normal
            // circumstances...
            this.r = Math.random();
            this.g = Math.random();
            this.b = Math.random();

            // When the star is twinkling, we draw it twice, once
            // in the color below (not spinning) and then once in the
            // main color defined above.
            this.twinkleR = Math.random();
            this.twinkleG = Math.random();
            this.twinkleB = Math.random();
        };



        var stars = [];

        function initWorldObjects() {
            var numStars = 50;

            for (var i = 0; i < numStars; i++) {
                stars.push(new Star((i / numStars) * 5.0, i / numStars));
            }
        }


        function drawScene() {
            gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            pMatrix = okMat4Proj(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);

            gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
            gl.enable(gl.BLEND);

            mvMatrix = okMat4Trans(0.0, 0.0, zoom);
            mvMatrix.rotX(OAK.SPACE_LOCAL, tilt, true);

            var twinkle = document.getElementById("twinkle").checked;
            for (var i in stars) {
                stars[i].draw(tilt, spin, twinkle);
                spin += 0.1;
            }

        }


        var lastTime = 0;

        function animate() {
            var timeNow = new Date().getTime();
            if (lastTime != 0) {
                var elapsed = timeNow - lastTime;

                for (var i in stars) {
                    stars[i].animate(elapsed);
                }
            }
            lastTime = timeNow;

        }


        function tick() {
            okRequestAnimationFrame(tick);
            handleKeys();
            drawScene();
            animate();
        }

        function webGLStart() {
            var canvas = document.getElementById("lesson09-canvas");
            initGL(canvas);
            initShaders();
            initBuffers();
            initTexture();
            initWorldObjects();

            gl.clearColor(0.0, 0.0, 0.0, 1.0);

            document.onkeydown = handleKeyDown;
            document.onkeyup = handleKeyUp;

            tick();
        }

    </script>
</head>

<body onload="webGLStart();">
    <canvas id="lesson09-canvas" style="border: none;" width="500" height="500"></canvas>

    <br />
    <input type="checkbox" id="twinkle" /> 闪光<br />
    （使用上/下方向键进行旋转，使用 <code>Page Up</code>键和<code>Page Down</code>键进行缩放）
</body>

</html>